<template>
	<div class="mesFollow">
		<ul class="anchorList">
			<li v-for="(item,index) in anchorList" :key="index" class="clearfix">
				<div class="fl head_portrait"><img :src="item.img"/></div>
				<div class="fr mesCon">
					<div class="clearfix">
						<span class="userName fl">{{item.userName}}</span>
						<div v-if="item.online" class="fr online">
							<span>当前在线</span>
						</div>
					</div>
					
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				anchorList:[{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:true
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:true
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:true
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},{
					userName:"小泡泡",
					img:"http://a.hiphotos.baidu.com/zhidao/pic/item/21a4462309f79052782f28490ff3d7ca7bcbd591.jpg",
					online:false
				},]
			}
		}
	}
</script>

<style>
	.mesFollow .head_portrait{width: 0.5rem;height: 0.5rem;position: relative;}
	.mesFollow .head_portrait img{display: block;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;}
	.mesFollow .mesCon{width: calc(100% - 0.65rem);height: 0.5rem;box-sizing: border-box;padding-right: 0.2rem;}
	.mesFollow .userName{font-size: 0.18rem;color: #4C4C4C;line-height: 0.2rem;line-height: 0.5rem;}
	.mesFollow .anchorList{background-color: #fff;padding-left: 0.2rem;}
	.mesFollow .anchorList li{padding: 0.17rem 0rem 0.13rem;background-color: #fff;margin-bottom: 0.06rem;border-bottom: 1px solid #f5f5f5;}
	.mesFollow .online{line-height: 0.5rem;}
	.mesFollow .online span{font-size: 0.12rem;color: #F5F5F5;text-align: center;display: inline-block;width: 0.6rem;height: 0.2rem;line-height: 0.2rem;background-color: #43bd31;border-radius: 100px;vertical-align: middle;}
	
</style>